<script setup>
	import { useUserStore } from '@/stores'
	import { postLoginAPI } from '../../services/login.js';
	
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

	// 获取用户手机号码
	const onGetphonenumber = async (ev) => {
		await checkedAgreePrivacy()
		const {
			encryptedData,
			iv
		} = ev.detail
		// console.log(1111111,encryptedData,iv)
		uni.login({
			provider: 'weixin', // 使用微信登录
			success(lres) {
				// console.log(1111111,lres.code,encryptedData,iv)
				postLoginAPI({
					code:lres.code,
					encryptedData,
					iv
				}).then(res=>{
					// console.log(11111111111,res)
					if (res.data.code == 200) {
						loginSuccess(res.data)
					} else {
						uni.showToast({
							icon: 'error',
							title: '登录失败'
						})
					}
				}).catch((err)=>{
					console.log(err)
					uni.showToast({
						icon: 'error',
						title: '登录失败'
					})
				})
				
			}
		});
	
	}

	const loginSuccess = (res) => {
		// console.log(1111111111,res)
		// openid: "oq-zK6_KsXQSApZgkjyxMejTHG60"
		// session_key: "/nq/YfQXykjQAW4Cu0eOEw=="
		// uId: "u001"
		// uImgUrl: "https://cdn.uviewui.com/uview/album/1.jpg"
		// uSex: 0
		// uStatus: 0
		// uTel: "18983127881"

		// 保存会员信息
		const userStore = useUserStore()
		userStore.setProfile(res.data.userInfo)
		// 成功提示
		uni.showToast({
			icon: 'success',
			title: '登录成功'
		})
		setTimeout(() => {
			// 页面跳转
			uni.switchTab({
				url: '/pages/index/index'
			})
		}, 500)
	}

	// 请先阅读并勾选协议
	const isAgreePrivacy = ref(false)
	const isAgreePrivacyShakeY = ref(false)
	const checkedAgreePrivacy = async () => {
		if (!isAgreePrivacy.value) {
			uni.showToast({
				icon: 'none',
				title: '请先阅读并勾选协议',
			})
			// 震动提示
			isAgreePrivacyShakeY.value = true
			setTimeout(() => {
				isAgreePrivacyShakeY.value = false
			}, 500)
			// 返回错误
			return Promise.reject(new Error('请先阅读并勾选协议'))
		}
	}

	const onOpenPrivacyContract = () => {
		// #ifdef MP-WEIXIN
		// 跳转至隐私协议页面
		wx.openPrivacyContract({})
		// #endif
	}
</script>

<template>
	<view class="viewport">
		<view class="logo">
			<image src="http://test.zshawk.top/static/img/login/logo_icon.png"></image>
		</view>
		<view class="login">
			<!-- 小程序端授权登录 -->
			<view class="button-privacy-wrap">
				<button :hidden="isAgreePrivacy" class="button-opacity button phone" @tap="checkedAgreePrivacy">
					请先阅读并勾选协议
				</button>
				<button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
					<text class="icon icon-phone"></text>
					手机号快捷登录
				</button>
			</view>
			<view class="tips" :class="{ animate__shakeY: isAgreePrivacyShakeY }">
				<label class="label" @tap="isAgreePrivacy = !isAgreePrivacy">
					<radio class="radio" color="red" :checked="isAgreePrivacy" />
					<text>登录/注册即视为你同意吾之老</text>
				</label>
				<navigator class="link" hover-class="none" url="./protocal">《服务条款》</navigator>
				和
				<text class="link" @tap="onOpenPrivacyContract">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	page {
		height: 100%;
	}

	.viewport {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 20rpx 40rpx;
	}

	.logo {
		flex: 1;
		text-align: center;

		image {
			width: 220rpx;
			height: 220rpx;
			margin-top: 15vh;
		}
	}

	.login {
		display: flex;
		flex-direction: column;
		height: 60vh;
		padding: 40rpx 20rpx 20rpx;

		.input {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			border-radius: 72rpx;
			border: 1px solid #ddd;
			padding-left: 30rpx;
			margin-bottom: 20rpx;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			border-radius: 72rpx;
			color: #fff;

			.icon {
				font-size: 40rpx;
				margin-right: 6rpx;
			}
		}

		.phone {
			background-color: red;
		}

		.extra {
			flex: 1;
			padding: 70rpx 70rpx 0;

			.caption {
				width: 440rpx;
				line-height: 1;
				border-top: 1rpx solid #ddd;
				font-size: 26rpx;
				color: #999;
				position: relative;

				text {
					transform: translate(-40%);
					background-color: #fff;
					position: absolute;
					top: -12rpx;
					left: 50%;
				}
			}

			.options {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 70rpx;

				button {
					padding: 0;
					background-color: transparent;

					&::after {
						border: none;
					}
				}
			}

			.icon {
				font-size: 24rpx;
				color: #444;
				display: flex;
				flex-direction: column;
				align-items: center;

				&::before {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 6rpx;
					font-size: 40rpx;
					border: 1rpx solid #444;
					border-radius: 50%;
				}
			}
		}
	}

	@keyframes animate__shakeY {
		0% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(0, -5rpx);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	.animate__shakeY {
		animation: animate__shakeY 0.2s ease-in-out 3;
	}

	.button-privacy-wrap {
		position: relative;

		.button-opacity {
			opacity: 0;
			position: absolute;
			z-index: 1;
		}
	}

	.tips {
		position: absolute;
		bottom: 80rpx;
		left: 20rpx;
		right: 20rpx;
		font-size: 22rpx;
		color: #999;
		text-align: center;

		.radio {
			transform: scale(0.6);
			margin-right: -4rpx;
			margin-top: -4rpx;
			vertical-align: middle;
		}

		.link {
			display: inline;
			color: red;
		}
	}
</style>